<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">备赛计划</text>
    </view>
    
    <!-- 即将到来的比赛 -->
    <view class="competition-card">
      <view class="comp-header">
        <view class="comp-info">
          <text class="comp-name">{{currentCompetition.name}}</text>
          <text class="comp-time">{{currentCompetition.timeStr}}</text>
        </view>
        <view class="countdown">
          <text class="countdown-number">{{currentCompetition.daysLeft}}</text>
          <text class="countdown-label">天</text>
        </view>
      </view>
      <view class="progress-section">
        <view class="progress-header">
          <text class="progress-title">备赛进度</text>
          <text class="progress-percent">{{completedPercent}}%</text>
        </view>
        <view class="progress-bar">
          <view class="progress-inner" :style="{width: completedPercent + '%'}"></view>
        </view>
        <view class="progress-stats">
          <text>已完成 {{completedTasks}}/{{totalTasks}} 个任务</text>
        </view>
      </view>
    </view>
    
    <!-- 学习计划 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">本周学习计划</text>
        <text class="current-week">第{{currentWeek}}周/共{{totalWeeks}}周</text>
      </view>
      
      <view class="week-progress">
        <view class="week-selector">
          <view class="arrow" @click="prevWeek" :class="{disabled: currentWeek === 1}">
            <uni-icons type="left" size="18" color="#333"></uni-icons>
          </view>
          <text class="week-range">{{weekRange}}</text>
          <view class="arrow" @click="nextWeek" :class="{disabled: currentWeek === totalWeeks}">
            <uni-icons type="right" size="18" color="#333"></uni-icons>
          </view>
        </view>
        <view class="week-goal">
          <text class="goal-label">本周目标：</text>
          <text class="goal-text">{{weeklyGoal}}</text>
        </view>
      </view>
      
      <view class="task-list">
        <view class="day-tasks" v-for="(day, index) in weekTasks" :key="index">
          <view class="day-header" @click="toggleDayCollapse(index)">
            <view class="day-info">
              <text class="day-name">{{day.date}} {{day.name}}</text>
              <view class="day-progress">
                <text>{{day.completed}}/{{day.total}}</text>
              </view>
            </view>
            <view class="collapse-icon" :class="{collapsed: !day.isExpanded}">
              <uni-icons type="bottom" size="14" color="#666"></uni-icons>
            </view>
          </view>
          <view class="task-items" v-if="day.isExpanded">
            <view class="task-item" v-for="(task, taskIndex) in day.tasks" :key="taskIndex">
              <view class="task-checkbox" :class="{checked: task.completed}" @click="toggleTask(index, taskIndex)">
                <uni-icons v-if="task.completed" type="checkmarkempty" size="14" color="#2fc25b"></uni-icons>
              </view>
              <view class="task-content">
                <text class="task-title" :class="{completed: task.completed}">{{task.title}}</text>
                <text class="task-desc" v-if="task.description">{{task.description}}</text>
                <view class="task-info" v-if="task.duration || task.difficulty">
                  <text class="task-duration" v-if="task.duration">预计耗时: {{task.duration}}</text>
                  <text class="task-difficulty" v-if="task.difficulty" :class="'level-' + task.difficulty">
                    {{getDifficultyText(task.difficulty)}}
                  </text>
                </view>
              </view>
              <view class="task-actions">
                <view class="action-icon" @click="viewTaskDetail(task)">
                  <uni-icons type="info" size="18" color="#1890ff"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 学习资源 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">推荐学习资源</text>
        <text class="more" @click="viewAllResources">全部 ></text>
      </view>
      <view class="resource-list">
        <view class="resource-item" v-for="(resource, index) in recommendResources" :key="index" @click="openResource(resource)">
          <view class="resource-icon" :class="resource.type">
            <uni-icons :type="getResourceIcon(resource.type)" size="24" color="#fff"></uni-icons>
          </view>
          <view class="resource-info">
            <text class="resource-title">{{resource.title}}</text>
            <text class="resource-desc">{{resource.description}}</text>
          </view>
          <view class="resource-tag" v-if="resource.isNew">新</view>
        </view>
      </view>
    </view>
    
    <!-- 学习提醒 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">学习提醒</text>
        <switch :checked="reminderEnabled" @change="toggleReminder" color="#1890ff" style="transform:scale(0.8)" />
      </view>
      <view class="reminder-content" v-if="reminderEnabled">
        <view class="reminder-setting">
          <text class="setting-label">提醒时间</text>
          <picker mode="time" :value="reminderTime" @change="timeChange">
            <view class="time-picker">
              <text>{{reminderTime}}</text>
              <uni-icons type="right" size="14" color="#999"></uni-icons>
            </view>
          </picker>
        </view>
        <view class="reminder-setting">
          <text class="setting-label">重复</text>
          <view class="repeat-days">
            <view class="day-item" 
                  v-for="(day, index) in weekdays" 
                  :key="index"
                  :class="{active: reminderDays.includes(index)}"
                  @click="toggleReminderDay(index)">
              {{day.substring(0,1)}}
            </view>
          </view>
        </view>
        <view class="reminder-tip">
          <text>每天{{reminderTime}}将通过微信提醒您督促孩子学习</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCompetition: {
        name: "NOIP 普及组",
        timeStr: "2023年10月15日",
        daysLeft: 21
      },
      completedTasks: 12,
      totalTasks: 30,
      completedPercent: 40,
      
      currentWeek: 1,
      totalWeeks: 4,
      weekRange: "9月1日-9月7日",
      weeklyGoal: "完成5道动态规划题，掌握基本DP思想和常见应用场景",
      
      weekTasks: [
        {
          date: "9月1日",
          name: "周一",
          completed: 2,
          total: 3,
          isExpanded: true,
          tasks: [
            {
              id: 1,
              title: "完成《基础算法》第5章习题",
              completed: true,
              duration: "1小时",
              difficulty: 2
            },
            {
              id: 2,
              title: "观看动态规划入门视频",
              description: "重点理解状态转移方程的推导过程",
              completed: true,
              duration: "45分钟",
              difficulty: 1
            },
            {
              id: 3,
              title: "LeetCode #70 爬楼梯问题",
              description: "尝试用递归和DP两种方法解决",
              completed: false,
              duration: "30分钟",
              difficulty: 2
            }
          ]
        },
        {
          date: "9月2日",
          name: "周二",
          completed: 1,
          total: 2,
          isExpanded: false,
          tasks: [
            {
              id: 4,
              title: "复习数据结构中的图论知识",
              completed: true,
              duration: "1小时",
              difficulty: 3
            },
            {
              id: 5,
              title: "完成模拟赛题目分析",
              completed: false,
              duration: "1.5小时",
              difficulty: 3
            }
          ]
        },
        {
          date: "9月3日",
          name: "周三",
          completed: 0,
          total: 2,
          isExpanded: false,
          tasks: [
            {
              id: 6,
              title: "LeetCode #53 最大子序和",
              description: "思考如何用动态规划优化时间复杂度",
              completed: false,
              duration: "40分钟",
              difficulty: 2
            },
            {
              id: 7,
              title: "做一套NOIP真题",
              completed: false,
              duration: "2小时",
              difficulty: 4
            }
          ]
        }
      ],
      
      recommendResources: [
        {
          id: 1,
          title: "动态规划入门到精通",
          description: "详解常见DP问题的分析与解题思路",
          type: "video",
          isNew: true
        },
        {
          id: 2,
          title: "NOIP历年真题解析",
          description: "包含近五年所有真题及详细题解",
          type: "pdf",
          isNew: false
        },
        {
          id: 3,
          title: "算法竞赛基础训练",
          description: "针对初学者的系统训练题集",
          type: "practice",
          isNew: false
        }
      ],
      
      reminderEnabled: true,
      reminderTime: "19:00",
      weekdays: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      reminderDays: [0, 1, 2, 3, 4]
    };
  },
  methods: {
    prevWeek() {
      if (this.currentWeek > 1) {
        this.currentWeek--;
        // 在实际应用中，这里应该加载对应周的数据
      }
    },
    nextWeek() {
      if (this.currentWeek < this.totalWeeks) {
        this.currentWeek++;
        // 在实际应用中，这里应该加载对应周的数据
      }
    },
    toggleDayCollapse(index) {
      this.weekTasks[index].isExpanded = !this.weekTasks[index].isExpanded;
    },
    toggleTask(dayIndex, taskIndex) {
      const task = this.weekTasks[dayIndex].tasks[taskIndex];
      task.completed = !task.completed;
      
      // 更新完成数量
      let completed = 0;
      this.weekTasks[dayIndex].tasks.forEach(t => {
        if (t.completed) completed++;
      });
      this.weekTasks[dayIndex].completed = completed;
      
      // 更新总进度
      this.updateOverallProgress();
    },
    updateOverallProgress() {
      let completed = 0;
      let total = 0;
      
      this.weekTasks.forEach(day => {
        completed += day.completed;
        total += day.total;
      });
      
      this.completedTasks = completed;
      this.totalTasks = total;
      this.completedPercent = Math.round((completed / total) * 100);
    },
    getDifficultyText(level) {
      const levels = ["", "入门", "基础", "进阶", "挑战", "专家"];
      return levels[level] || "";
    },
    viewTaskDetail(task) {
      // 查看任务详情
      uni.showToast({
        title: '查看任务：' + task.title,
        icon: 'none'
      });
    },
    viewAllResources() {
      // 查看全部资源
      uni.showToast({
        title: '查看全部资源',
        icon: 'none'
      });
    },
    openResource(resource) {
      // 打开资源
      uni.showToast({
        title: '打开资源：' + resource.title,
        icon: 'none'
      });
    },
    getResourceIcon(type) {
      const icons = {
        'video': 'videocam',
        'pdf': 'paperplane',
        'practice': 'compose'
      };
      return icons[type] || 'info';
    },
    toggleReminder(e) {
      this.reminderEnabled = e.detail.value;
    },
    timeChange(e) {
      this.reminderTime = e.detail.value;
    },
    toggleReminderDay(index) {
      const pos = this.reminderDays.indexOf(index);
      if (pos > -1) {
        this.reminderDays.splice(pos, 1);
      } else {
        this.reminderDays.push(index);
      }
    }
  }
};
</script>

<style>
.container {
  padding: 30rpx;
  padding-bottom: 100rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.competition-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.comp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.comp-info {
  display: flex;
  flex-direction: column;
}

.comp-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.comp-time {
  font-size: 24rpx;
  color: #666;
}

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #f04864;
}

.countdown-label {
  font-size: 22rpx;
  color: #666;
}

.progress-section {
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.progress-title {
  font-size: 28rpx;
  color: #333;
}

.progress-percent {
  font-size: 28rpx;
  color: #1890ff;
  font-weight: bold;
}

.progress-bar {
  height: 14rpx;
  background-color: #f0f0f0;
  border-radius: 7rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.progress-inner {
  height: 100%;
  background-color: #1890ff;
  border-radius: 7rpx;
}

.progress-stats {
  display: flex;
  justify-content: flex-end;
  font-size: 22rpx;
  color: #666;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.current-week {
  font-size: 24rpx;
  color: #666;
}

.more {
  font-size: 26rpx;
  color: #1890ff;
}

.week-progress {
  margin-bottom: 20rpx;
}

.week-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.arrow {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow.disabled {
  opacity: 0.5;
}

.week-range {
  font-size: 28rpx;
  color: #333;
}

.week-goal {
  background-color: #f8f8f8;
  padding: 20rpx;
  border-radius: 12rpx;
}

.goal-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.goal-text {
  font-size: 28rpx;
  color: #333;
}

.task-list {
  display: flex;
  flex-direction: column;
}

.day-tasks {
  margin-bottom: 20rpx;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.day-info {
  display: flex;
  align-items: center;
}

.day-name {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.day-progress {
  font-size: 24rpx;
  color: #666;
  background-color: #fff;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.collapse-icon {
  transition: transform 0.3s;
}

.collapse-icon.collapsed {
  transform: rotate(-90deg);
}

.task-items {
  padding: 10rpx 0;
}

.task-item {
  display: flex;
  padding: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.task-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  border: 2rpx solid #ddd;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checked {
  border-color: #2fc25b;
  background-color: #f0fff0;
}

.task-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.task-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.completed {
  color: #999;
  text-decoration: line-through;
}

.task-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.task-info {
  display: flex;
  align-items: center;
}

.task-duration {
  font-size: 22rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
  margin-right: 10rpx;
}

.task-difficulty {
  font-size: 22rpx;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
}

.level-1 {
  color: #52c41a;
  background-color: #f6ffed;
}

.level-2 {
  color: #1890ff;
  background-color: #e6f7ff;
}

.level-3 {
  color: #fa8c16;
  background-color: #fff7e6;
}

.level-4 {
  color: #f5222d;
  background-color: #fff1f0;
}

.level-5 {
  color: #722ed1;
  background-color: #f9f0ff;
}

.task-actions {
  display: flex;
  align-items: center;
}

.action-icon {
  padding: 10rpx;
}

.resource-list {
  display: flex;
  flex-direction: column;
}

.resource-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.resource-item:last-child {
  border-bottom: none;
}

.resource-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.resource-icon.video {
  background-color: #f56c6c;
}

.resource-icon.pdf {
  background-color: #409eff;
}

.resource-icon.practice {
  background-color: #67c23a;
}

.resource-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resource-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.resource-desc {
  font-size: 24rpx;
  color: #666;
}

.resource-tag {
  position: absolute;
  top: 10rpx;
  right: 0;
  background-color: #f04864;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
}

.reminder-content {
  padding: 10rpx 0;
}

.reminder-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-label {
  font-size: 28rpx;
  color: #333;
}

.time-picker {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 28rpx;
}

.repeat-days {
  display: flex;
}

.day-item {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #666;
  border: 1rpx solid #ddd;
  border-radius: 50%;
  margin-left: 10rpx;
}

.day-item.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.reminder-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}
</style> 